<script setup>
import {useRouter} from "vue-router";
import {ref, computed} from "vue";
import {useStore} from "vuex";
import { Avatar, Lock } from '@element-plus/icons-vue';
import {ElMessageBox} from "element-plus";
import router from "@/router";
import axios, {request} from "axios";
const input = ref('');
const input1 = ref('');
const input2 = ref('');
const store = useStore();


const users = computed(() => store.state.users);

const enterHome = function () {
  if(!input1.value||!input2.value){
    alert("请输入账号和密码");
    return;
  }
  axios.get(`/consultant/login?username=${input1.value}&password=${input2.value}`)
      .then(resp => {
        console.log(resp.data)
        if (resp.data.code == 200){
          alert("登录成功")
          localStorage.setItem('token',resp.data.data)
          axios.get(`/consultant/findByUsername?username=${input1.value}`)
              .then(resp=>{
                localStorage.setItem('consultantId',resp.data.data.consultantId)
                axios.get(`/consultant/findById?consultantId=${resp.data.data.consultantId}`)
                    .then(resp=>{
                      console.log("值")
                     console.log(resp)
                      localStorage.setItem('avatar',resp.data.data.avatar)
                      localStorage.setItem('password',resp.data.data.password)
                      localStorage.setItem('username',resp.data.data.username)
                      localStorage.setItem('realname',resp.data.data.realname)
                      localStorage.setItem('phone',resp.data.data.phone)
                      localStorage.setItem('gender',resp.data.data.gender)
                      localStorage.setItem('address',resp.data.data.address)
                      localStorage.setItem('age',resp.data.data.age)
                   })
                    .catch(err=>{
                      console.log(err)
                    })
              })
              .catch(err=>{
                console.log(err)
              })
          // 处理响应数据
          router.push("/home");
        }
        else {
          alert("账号或密码错误，请重新输入")
        }
      })
      .catch(err => {
        alert("访问失败")
        // 处理错误
        console.error(err);
      });
}


</script>

<template>
<div class="body">
  <div class="login">
    <div class="box">
      <h3>登录:</h3>
      <p>你驻足于春色之中，于那独一无二的春色之中。</p>
      <div class="middle1">
        <el-input
            v-model="input1"
            style="width: 240px"
            placeholder="请输入账号"
            :suffix-icon="Avatar"
        />
      </div>
      <div class="middle2">
        <el-input
            v-model="input2"
            style="width: 240px"
            type="password"
            placeholder="请输入密码"
            show-password
            :suffix-icon="Lock"
        />
      </div>
      <div class="bottom">
        <div class="bottom-left">
          <el-input v-model="input" style="width: 120px" placeholder="请输入验证码" />
          <el-checkbox v-model="checked1" label="记住我" size="large" />
        </div>
        <div class="bottom-right">
          <a href="http://localhost:8080/login" title="点击更换验证码">
            <img src="https://demo.ruoyi.vip/captcha/captchaImage?type=math&s=0.3699577690532301" alt="">
          </a>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="enterHome" style="width: 240px;">登录</el-button>
      </div>

    </div>


  </div>
</div>
</template>

<style scoped>

.body{
  height: 738px;
  background: url(https://demo.ruoyi.vip/img/login-background.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  background-size: cover;
  width: 100%;
  display: flex;
  justify-content: center;
}
.login{
  width: 100%;
  height: 300px;
  margin: 150px auto;
}
.box{
  height: 350px;
  width: 340px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .3);
  position: relative;
}
.box>p{
  margin: 15px auto;
  font-size: 14px;
  font-family: 华文仿宋,serif;
}
.middle1{
  margin: 20px auto;
}
.middle2{
  margin: 20px auto;
}
.bottom{
  width: 100%;
  height: 60px;
  display: inline-block;
}
.bottom-left{
  float: left;
  display: flex;
  flex-direction: column;
}
.bottom-right{
  float: right;
}
.btn{
  position: absolute!important;
  bottom: 15px!important;
  left: 45px!important;
}
</style>